<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" charset="utf-8" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div{
            width:500px ;
            height: 500px;
            overflow: hidden;
            background-color: black;
            text-align: center;
            margin: 0px auto;
        }
        .img {
            width:200px;
            height: auto;
            margin: 20%;
        }
        
        .div1:hover{
            opacity: 0.7;
        }
        /* 第二步；这次我们使用background的rgba来实现透明度,1为不透明，0是完全透明消失 */
        .div2:hover{
            background: rgba(0,0,0,0.7);
        }
    </style>
</head>
<body style="background-color: #fc9b5a;">

<div class="div1">
    <img class="img" src="https://pic.qqtn.com/up/2018-1/15155479522444394.jpg">
</div>
<!-- 第一步；设置需要设置透明度的元素 -->
<div class="div2">
    <img class="img" src="https://pic.qqtn.com/up/2018-1/15155479522444394.jpg">
</div>

</body>
</html>